import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../generated/assets.dart';
import 'app_color.dart';
import 'app_image.dart';

class AppInput extends StatefulWidget {
  const AppInput({
    this.controller,
    this.onSubmitted,
    this.onChanged,
    this.hint,
    this.keyboardType,
    this.inputFormatters,
    this.hintStyle,
    this.style,
    this.contentPadding,
    this.obscureText = false,
    super.key,
  });

  final TextInputType? keyboardType;
  final List<TextInputFormatter>? inputFormatters;
  final TextEditingController? controller;
  final ValueChanged<String>? onSubmitted;
  final ValueChanged<String>? onChanged;
  final String? hint;
  final TextStyle? style;
  final TextStyle? hintStyle;
  final EdgeInsetsGeometry? contentPadding;
  final bool obscureText;

  @override
  State<AppInput> createState() => _AppInputState();
}

class _AppInputState extends State<AppInput> {
  late TextEditingController _textEditingController;

  bool isEmptyInput = true;

  @override
  void initState() {
    super.initState();
    _textEditingController = widget.controller ?? TextEditingController();

    _textEditingController.addListener(() {
      setState(() {
        isEmptyInput = _textEditingController.text.isEmpty;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 44.w,
      decoration: BoxDecoration(
        color: AppColor.white_20,
        borderRadius: BorderRadius.circular(4).r,
      ),
      alignment: Alignment.centerLeft,
      child: Stack(
        children: [
          TextField(
            controller: _textEditingController,
            maxLines: 1,
            obscureText : widget.obscureText,
            keyboardType: widget.keyboardType,
            inputFormatters: widget.inputFormatters,
            textAlignVertical: TextAlignVertical.center,
            style:
                widget.style ??
                TextStyle(fontSize: 14.sp, color: AppColor.white),
            decoration: InputDecoration(
              isCollapsed: true,
              hintStyle:
                  widget.hintStyle ??
                  TextStyle(fontSize: 14.sp, color: AppColor.white_40),
              hintText: widget.hint,
              border: InputBorder.none,
              contentPadding:
                  widget.contentPadding ??
                  const EdgeInsets.symmetric(horizontal: 20 , vertical: 6).w,
            ),
            cursorColor: AppColor.primary,
            onSubmitted: widget.onSubmitted,
            onChanged: widget.onChanged,
          ),
          Positioned(
            right: 20.w,
            top: 0,
            bottom: 0,
            child: Visibility(
              visible: !isEmptyInput,
              child: AppImage(
                Assets.imagesIcInputClear,
                size: 14,
                onTap: () {
                  _textEditingController.clear();
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _textEditingController.dispose();
  }
}
